<template>
    <div style="display: block;width: 368px;margin: 0 auto;">
        <a-form :form="form" @submit="handleSubmit">
            <a-form-item v-bind="formItemLayout">
                  <span slot="label">
                    账  号&nbsp;
                    <a-tooltip title="请属于账号(6位数以上)?">
                      <a-icon type="question-circle-o"/>
                    </a-tooltip>
                  </span>
                <a-input v-decorator="[ 'account', { rules: [{ required: true, message: '请输入你的账号!',
                  whitespace: true }, {validator: textLength},],},]"/>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="邮  箱">
                <a-input v-decorator="['email',{rules: [{type: 'email',message: '请输入正确的格式!',},{
                required: true,message: '请输入邮箱!',},],},]"/>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="密  码">
                <a-input v-decorator="['password',{rules: [{required: true,message: '请输入密码!',},{
                validator: validateToNextPassword,},],},]" type="password"/>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="确认密码">
                <a-input v-decorator="['confirm',{rules: [{required: true,message: '请再次输入密码确认!',},{
                validator: compareToFirstPassword,},],},]" type="password" @blur="handleConfirmBlur"/>
            </a-form-item>
            <a-form-item v-bind="formItemLayout">
                  <span slot="label">
                    昵  称&nbsp;
                    <a-tooltip title="请输入你的昵称?">
                      <a-icon type="question-circle-o"/>
                    </a-tooltip>
                  </span>
                <a-input
                        v-decorator="[ 'nickname', { rules: [{ required: true, message: '请输入你的昵称!', whitespace: true }],},]"/>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="手机号码">
                <a-input v-decorator="[ 'phone', { rules: [{ required: true, message: '请输入手机号码!' }],},]"
                         style="width: 100%">
                    <a-select slot="addonBefore" v-decorator="['prefix', { initialValue: '86' }]" style="width: 70px">
                        <a-select-option value="86">
                            +86
                        </a-select-option>
                        <a-select-option value="87">
                            +87
                        </a-select-option>
                    </a-select>
                </a-input>
            </a-form-item>
            <a-form-item v-bind="formItemLayout" label="验证码">
                <a-row :gutter="8">
                    <a-col :span="12">
                        <a-input size="large"
                                 v-decorator="['captcha', { rules: [{ required: true, message: '请输入验证码!' }] },]">
                        </a-input>
                    </a-col>
                    <a-col :span="12" style="padding-top: 5px">
                        <div @click="refreshCode">
                            <SIdentify :identifyCode="identifyCode"></SIdentify>
                        </div>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item v-bind="tailFormItemLayout">
                <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
                    我已经阅读并接受
                    <a href="">
                        协议
                    </a>
                </a-checkbox>
            </a-form-item>
            <a-form-item v-bind="tailFormItemLayout">
                <a-button type="primary" html-type="submit">
                    注 册
                </a-button>
            </a-form-item>
        </a-form>

    </div>
</template>

<script>
    import SIdentify from '../../components/identify'

    export default {
        name: 'register',
        components: {SIdentify},
        data() {
            return {
                confirmDirty: false,
                identifyCode: '',
                autoCompleteResult: [],
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 8},
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 16},
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {
                            span: 24,
                            offset: 0,
                        },
                        sm: {
                            span: 16,
                            offset: 8,
                        },
                    },
                },
            };
        },
        mounted() {
            this.refreshCode();
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, {name: 'register'});
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFieldsAndScroll((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                        if (!values.agreement) {
                            this.$message.info('无法提供服务');
                        }else {
                            console.log('ok');
                        }
                    }
                });
            },
            handleConfirmBlur(e) {
                const value = e.target.value;
                this.confirmDirty = this.confirmDirty || !!value;
            },
            compareToFirstPassword(rule, value, callback) {
                const form = this.form;
                if (value && value !== form.getFieldValue('password')) {
                    callback('两次密码不相同');
                } else {
                    callback();
                }
            },
            textLength(rule, value, callback) {
                if (value && value.length <= 6) {
                    callback('账号长度必须大于6');
                } else {
                    callback();
                }
            },
            validateToNextPassword(rule, value, callback) {
                const form = this.form;
                if (value && this.confirmDirty) {
                    form.validateFields(['confirm'], {force: true});
                }
                callback();
            },
            randomNum(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },
            refreshCode() {
                this.makeCode( 4);
            },
            makeCode(number) {
                this.identifyCode = "";
                const strs = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
                    'w', 'x', 'y', 'z'];
                for (let i = 0; i < number; i++) {
                    this.identifyCode += strs[
                        this.randomNum(0, strs.length)
                        ];
                }
            },
        },
    };
</script>

<style scoped>

</style>
